Props Destructuring in React

Props destructuring is a JavaScript feature commonly used in React to extract individual properties from the props object. It makes functional components cleaner, shorter, and easier to read by allowing developers to access props directly instead of repeatedly writing props.propertyName.

In React, a parent component passes data to a child component through props. The child can use destructuring to access strings, numbers, arrays, objects, functions, and other values passed by the parent.

Course: JustAcademy React JS Training Course

Course Demo: Register for React JS Course Demo

1. What Are Props in React?

Props stands for properties. Props are inputs passed from a parent component to a child component. They allow components to receive information and display dynamic content.

Example Without Destructuring

function Student(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}
function App() {
  return <Student name="Rahul" age={21} />;
}
export default App;

Output:

Name: Rahul
Age: 21

In this example, the component receives a single object called props. The values are accessed using props.name and props.age.

2. What Is Destructuring in JavaScript?

Destructuring is a JavaScript feature that allows you to extract values from arrays or properties from objects and assign them to variables.

Example of Object Destructuring

const student = {
  name: "Rahul",
  age: 21,
  city: "Mumbai"
};
const { name, age, city } = student;
console.log(name);
console.log(age);
console.log(city);

Output:

Rahul
21
Mumbai

Instead of accessing each value through student.name, student.age, and student.city, destructuring creates variables for these properties.

3. What Is Props Destructuring?

Props destructuring means extracting individual properties directly from the props object in a React component's function parameter.

Syntax

function ComponentName({ prop1, prop2 }) {
  return (
    <div>
      {prop1}
      {prop2}
    </div>
  );
}

The curly braces inside the function parameters represent JavaScript object destructuring. They are different from the curly braces used inside JSX to display JavaScript expressions.

Example

function Student({ name, age }) {
  return (
    <div>
      <h2>Name: {name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}
function App() {
  return <Student name="Priya" age={22} />;
}
export default App;

Output:

Name: Priya
Age: 22

Here, name and age are extracted directly from the props object, so there is no need to write props.name or props.age.

4. Props Destructuring vs. Accessing Props Directly

React supports both approaches. Destructuring is a convenient syntax, not a separate React feature.

Without Destructuring

function Product(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Price: ₹{props.price}</p>
      <p>Category: {props.category}</p>
    </div>
  );
}

With Destructuring

function Product({ name, price, category }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Price: ₹{price}</p>
      <p>Category: {category}</p>
    </div>
  );
}

5. Destructuring Multiple Props

A component can destructure multiple props in its function parameter. This is useful when a component receives several values from its parent.

Example

function Employee({ name, age, role, salary }) {
  return (
    <div>
      <h2>Employee Details</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Role: {role}</p>
      <p>Salary: ₹{salary}</p>
    </div>
  );
}
function App() {
  return (
    <Employee
      name="Amit"
      age={25}
      role="Frontend Developer"
      salary={45000}
    />
  );
}
export default App;

Output:

Employee Details
Name: Amit
Age: 25
Role: Frontend Developer
Salary: ₹45000

All four props are extracted and can be used directly inside the component.

6. Props Destructuring with Strings and Numbers

Props can contain different data types. Destructuring works the same way regardless of whether a prop contains a string or a number.

Example

function Course({ title, duration, price }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>Duration: {duration} months</p>
      <p>Fee: ₹{price}</p>
    </div>
  );
}
function App() {
  return (
    <Course
      title="React JS Training"
      duration={3}
      price={15000}
    />
  );
}
export default App;

Explanation: The title prop is a string, while duration and price are numbers. Destructuring extracts all three values.

7. Props Destructuring with Objects

When a prop contains an object, you can destructure the prop first and then access its properties. You can also use nested destructuring when it improves readability.

Example 1: Destructure the Object Prop

function StudentDetails({ student }) {
  return (
    <div>
      <h2>{student.name}</h2>
      <p>Age: {student.age}</p>
      <p>City: {student.city}</p>
    </div>
  );
}
function App() {
  const student = {
    name: "Neha",
    age: 20,
    city: "Pune"
  };
  return <StudentDetails student={student} />;
}
export default App;

Example 2: Nested Destructuring

function StudentDetails({ student: { name, age, city } }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}

In { student: { name, age, city } }, the property named student is extracted and its nested properties are also destructured. This concise syntax assumes that student exists and is not null or undefined. If the object may be missing, use a safe fallback or access its properties separately.

8. Props Destructuring with Arrays

When an array is passed through a prop, you can destructure the prop name and then use array methods such as map() to render the items.

Example

function Skills({ skills }) {
  return (
    <div>
      <h2>Skills</h2>
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}
function App() {
  const skills = ["HTML", "CSS", "JavaScript", "React"];
  return <Skills skills={skills} />;
}
export default App;

Output:

Skills
- HTML
- CSS
- JavaScript
- React

The component destructures the skills prop and uses map() to display each skill. Each list item should have a stable, unique key; using the skill text as the key is suitable here only if the values are unique.

9. Providing Default Values During Props Destructuring

You can assign default values while destructuring props. A default is used when the prop is missing or its value is undefined.

Syntax

function Component({ propName = defaultValue }) {
  return <p>{propName}</p>;
}

Example

function Greeting({ name = "Guest" }) {
  return <h2>Welcome, {name}!

The following JSX completes the component:

function Greeting({ name = "Guest" }) {
  return <h2>Welcome, {name}!</h2>;
}
function App() {
  return (
    <div>
      <Greeting name="Rahul" />
      <Greeting />
    </div>
  );
}
export default App;

Output:

Welcome, Rahul!
Welcome, Guest!

Important: A default value does not replace null, 0, false, or an empty string. It applies only when the property is missing or explicitly undefined.

10. Renaming Props During Destructuring

You can assign a different local variable name to a prop using the object destructuring alias syntax. The prop name remains unchanged at the point where the component is used.

Syntax

function Component({ originalName: localName }) {
  return <p>{localName}</p>;
}

Example

function User({ name: userName, age: userAge }) {
  return (
    <div>
      <p>Name: {userName}</p>
      <p>Age: {userAge}</p>
    </div>
  );
}
function App() {
  return <User name="Priya" age={23} />;
}
export default App;

Here, the component receives props named name and age, but uses the local variables userName and userAge.

11. Destructuring Props Inside the Function Body

Destructuring does not have to happen in the function parameter. You can accept the entire props object and destructure it inside the component body.

Example

function Student(props) {
  const { name, age, city } = props;
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}
export default Student;

This approach can be useful when you need to inspect or use the complete props object elsewhere in the function.

12. Props Destructuring with Function Props

Functions can also be destructured from props. This is commonly used when a child component receives a callback from its parent.

Example

function ActionButton({ label, onAction }) {
  return (
    <button onClick={onAction}>
      {label}
    </button>
  );
}
function App() {
  function handleClick() {
    alert("Action completed!");
  }
  return (
    <ActionButton
      label="Click Me"
      onAction={handleClick}
    />
  );
}
export default App;

In this example, the child component extracts both label and onAction from props. The function is called when the button is clicked.

13. The Rest Operator in Props Destructuring

The rest syntax allows you to extract some props while collecting the remaining properties into another object. This can be useful when forwarding additional props to a child element.

Example

function ProfileCard({ title, ...otherProps }) {
  return (
    <section {...otherProps}>
      <h2>{title}</h2>
    </section>
  );
}
function App() {
  return (
    <ProfileCard
      title="Student Profile"
      id="student-profile"
      className="profile-card"
    />
  );
}
export default App;

Explanation:

• title is extracted into its own variable.
• otherProps collects the remaining props, such as id and className.
• {...otherProps} forwards those properties to the section element.

Use prop spreading carefully. Forward only props that are appropriate for the target component or HTML element.

14. Props Destructuring with the children Prop

When JSX is placed between a component's opening and closing tags, React passes that content through the special children prop.

Example

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}
function App() {
  return (
    <Card title="React Basics">
      <p>Learn components and props.</p>
    </Card>
  );
}
export default App;

Output:

React Basics
Learn components and props.

The Card component destructures both title and children. This allows the parent to customize the card's heading and nested content.

15. Common Mistakes in Props Destructuring

Mistake 1: Incorrect Curly Braces

function Student(name, age) {
  return <p>{name} - {age}</p>;
}

A function component receives its props as one object argument. Use object destructuring in the parameter:

function Student({ name, age }) {
  return <p>{name} - {age}</p>;
}

Mistake 2: Using a Property That Was Not Passed

function Student({ name, age }) {
  return <p>{name} - {age}</p>;
}
<Student name="Amit" />

Here, age is undefined because the parent did not pass it. If needed, supply a default value or pass the prop explicitly.

Mistake 3: Confusing Object Destructuring with JSX Expressions

function Student({ name }) {
  return <p>{name}</p>;
}

The braces in ({ name }) destructure the props object. The braces in {name} inside JSX evaluate a JavaScript expression.

Mistake 4: Trying to Modify Props

Props should be treated as read-only. Destructuring creates local variables for accessing values; it does not make the original props mutable. Use state or update the parent-owned data when changes are needed.

Mistake 5: Destructuring a Missing Nested Object

function Student({ student: { name } }) {
  return <p>{name}</p>;
}

This can fail if student is missing or null. Ensure the parent supplies the object or use a safe fallback before accessing nested properties.

16. Best Practices for Props Destructuring

• Destructure props when it improves readability.
• Use meaningful variable names that reflect the data being accessed.
• Provide default values for optional props when appropriate.
• Use nested destructuring only when it remains clear and safe.
• Keep prop names consistent between parent and child components.
• Use the rest operator only when forwarding additional props is necessary.
• Remember that destructuring is JavaScript syntax and does not change React's prop behavior.
• Treat props as read-only values.
• Use TypeScript or suitable validation when stronger prop type checks are required.

17. Practical Project: Student Profile Card

Build a reusable student profile card using props destructuring. The component should display a student's name, course, age, and skills.

function StudentCard({ name, age, course, skills }) {
  return (
    <div className="student-card">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Course: {course}</p>
      <h3>Skills</h3>
      <ul>
        {skills.map((skill) => (
          <li key={skill}>{skill}</li>
        ))}
      </ul>
    </div>
  );
}
function App() {
  return (
    <StudentCard
      name="Ananya"
      age={21}
      course="React JS"
      skills={["HTML", "CSS", "JavaScript", "React"]}
    />
  );
}
export default App;

Expected Output:

Ananya
Age: 21
Course: React JS
Skills
- HTML
- CSS
- JavaScript
- React

Learning outcomes:

• Pass multiple props to a reusable component.
• Destructure strings, numbers, and arrays.
• Render an array using map().
• Use unique keys when rendering list items.

18. Interview Questions and Answers

Q1. What is props destructuring in React?

Answer: It is a JavaScript technique that extracts individual properties from the props object so components can use them directly.

Q2. Why is props destructuring useful?

Answer: It can reduce repetitive code and make components easier to read.

Q3. What is the difference between props.name and { name } in a component parameter?

Answer: props.name accesses a property from the props object, while { name } in the function parameter destructures that property into a local variable.

Q4. Can we destructure multiple props?

Answer: Yes. For example, function User({ name, age, city }) extracts three props.

Q5. Can default values be used during destructuring?

Answer: Yes. For example, function Greeting({ name = "Guest" }) uses "Guest" when the prop is missing or undefined.

Q6. Can we destructure objects and arrays passed through props?

Answer: Yes. You can destructure the prop itself and then access or destructure the nested data as needed.

Q7. What is nested destructuring?

Answer: Nested destructuring extracts properties from an object contained within another property.

Q8. Can props be modified after destructuring?

Answer: Props should remain read-only. Destructuring does not change this rule.

Q9. What does the rest operator do in props destructuring?

Answer: It collects remaining properties into a new object, which can be useful for forwarding additional props.

Q10. Is destructuring mandatory in React?

Answer: No. You can use the full props object or destructure the properties. Both approaches work.

19. Practice Exercises

1. Create a Greeting component that destructures a name prop.
2. Create a Product component that destructures name, price, and category.
3. Create a Student component that destructures a nested student object.
4. Create a Course component that accepts a title and an array of topics.
5. Use a default prop value when a greeting name is not provided.
6. Rename the name prop to a local variable called userName.
7. Create a Card component that destructures title and children.
8. Build a profile component that uses the rest operator to forward additional props.

20. Quick Revision Checklist

• Understand what props are and how they are passed to components.
• Understand object destructuring in JavaScript.
• Know how to destructure props in a function parameter.
• Know how to destructure props inside a component body.
• Practice destructuring multiple props and nested objects.
• Understand default values and renamed variables.
• Know how to destructure function props and the children prop.
• Understand the rest operator for forwarding props.
• Remember that props are read-only.

21. Official Documentation and Course Links

• React Official Documentation: Passing Props to a Component
• React Official Documentation: JavaScript in JSX with Curly Braces
• JustAcademy React JS Training Course
• Register for React JS Course Demo

Conclusion

Props destructuring is a useful JavaScript technique for writing clean and readable React components. It lets developers extract individual values from props, provide default values, rename local variables, access nested data, and work with callbacks or children more conveniently. Understanding props destructuring makes it easier to build reusable and maintainable React applications.

To continue learning React, explore the JustAcademy React JS Training Course or register for a course demo.